﻿<template>
	<div class="task clearFloat">
	<!--title部分-->
    <div class="title clearFloat">
		  <div class="logo">
			  <image v-bind:src="userInf.headimgurl" />
			</div>
			<div class="add-title">
			  <input type="text" placeholder="请填写标题" v-model="title">
			</div>
		</div>
		<!--时间信息位置信息部分-->
		<div class="dateInf">
		  <div class="date"><img src="images/clock.png" class="mr5"/>
		  <span @click="showCalendar">{{value}}</span>
          <calendar :show.sync="show" :value.sync="value" :x="x" :y="y" :begin="begin" :end="end" :range="range"></calendar>
	   </div>
			<div class="location mt5"><img src="images/location.png" class="mr5"/>{{address}}</div>
		</div>
		<!--任务详情-->
		<div class="task-detail mt5">任务详情</div>
		<!--添加任务-->
		<vtext class="mt5" :contents="contents"></vtext>
		<div class="add-task mt5">
		  <div class="addPoint" v-if='showAndHidden'>
			  <image src="images/add1.png" v-on:click="showSelect"/>
			</div>
			<div class="select clearFloat" v-else>
			  <div class="selectIcon"><image src="images/text.png" v-on:click="showText" /></div>
				<div class="selectIcon"><image src="images/image.png" v-on:click="showImg" /></div>
				<div class="selectIcon"><image src="images/sound.png" v-on:click="showSound" /></div>
			</div>
		</div>
		<img v-if = 'lodding' class="lodding" src="../common/images/lodding.gif" />
		<div v-on:click = "addTask" class = 'addTask'>提交</div>
	</div>
</template>

<script>
import Vue from 'vue'
import vtext from '../common/Text'
import vhead from '../common/Head'
import calendar from '../common/calender'
import VueResource from 'vue-resource'
Vue.use(VueResource);
export default {
  components: {
	  vtext,
		vhead,
		calendar
	},
  data () {
	  return {
		  showAndHidden: true,
		  title: '',
		  contents: [],
		  address: '深圳市南山区高新园高新二道',
		  show:false,
		  lodding: false,
            type:"date", //date datetime
            value:"2017-5-20~2017-5-21",
            begin:"2017-5-20",
            end:"2018-12-25",
            x:0,
            y:0,
            range:true,//是否多选
		 userInf: {
		   openid: '',
			 sex: '',
			 province: '',
			 city: '',
			 country: '',
			 headimgurl: '',
			 nickname: '',
		 }
		}
	},
	methods: {
	  showSelect: function () {
	  this.showAndHidden=false
	},
	  showText: function () {
	    var that = this
	    this.showAndHidden=true
	    var tmp={
		    textShow: true,
			showBottom: false,
			contents: {
			  textContent: '',
			  type: 1,
			  index: that.contents.length,
			}

		}
	    that.contents.push(tmp)
	  },
	  showImg: function () {
			var that = this
	        that.showAndHidden=true
			wx.chooseImage({
			  count: 1, // 默认9
              sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
              success: function (res) {
              var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

				 //上传图片到微信服务器
				 wx.uploadImage({
		            localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
		            isShowProgressTips: 1, // 默认为1，显示进度提示
		            success: function (res) {
		            var media_id = res.serverId; // 返回图片的服务器端ID
					console.log('+++上传图片到微信服务器media_id'+media_id)

					console.log('全局media_id'+media_id)
					console.log('图片本地地址'+localIds[0])
	 				var tmp={

	 			    imgShow: true,
	 				showBottom: false,
					imgSrc: localIds[0],
					contents: {
					  type: 2,
					  media_id: media_id,
					  index: that.contents.length,
					}
	 			  }
	 				that.contents.push(tmp)
		     }
		     });

              }
        });
	  },
	  showSound: function () {
	    var that = this
	    this.showAndHidden=true
	    var tmp={
		    soundShow: true,
			showBottom: false,
			showtime: '00:00',
			status: 1,
			SI: {},
			localId: '',
			contents: {
			  type: 3,
			  time: 0,
			  media_id: '',
			  index: that.contents.length,
			}
		}
	    this.contents.push(tmp)
	  },
	  //日历显示
	  showCalendar:function(e){
            e.stopPropagation();
            var that=this;
            that.show=true;
            that.x=e.target.offsetLeft;
            that.y=e.target.offsetTop+e.target.offsetHeight+8;
            var bindHide=function(e){
                e.stopPropagation();
                that.show=false;
                document.removeEventListener('click',bindHide,false);
            };
            setTimeout(function(){
                document.addEventListener('click',bindHide,false);
            },500);
        },
		//阻止默认行为
		preventDef: function (event) {
		  event.preventDefault();
		},
		//提交任务
		addTask: function (event) {
		Vue.use(VueResource);
	　　var that=this
	    if(that.title=='' || that.contents.length<=0){
	      alert('标题和任务内容不能为空！')
	     }else{
	     that.lodding=true
	/* that.$http({
	 	method:'post',
	 	headers: {"X-Requested-With": "XMLHttpRequest"},
	 	emulateJSON: true,
	 	url:'http://xyg.bigdatas.top/ivory-valley/task/task.dx',
	 	data:{
		"contents":that.contents.contents,
		"value":that.value,
		"title":that.title,
		"address":that.address
		}
	  }).then(function(data){
	 		 console.log('++userInf:'+data.data)
	 		 alert('+++userInf:'+data.data)

	 },function(error){

	 		})*/
			this.$http.post('http://xyg.bigdatas.top/ivory-valley/task/task.dx',{"contents":JSON.stringify(that.contents),"value":that.value,"title":that.title,"address":that.address},{"emulateJSON":true}).then(function(data){
			console.log('data+++++'+data.data)
			})

	}

		}
	},
	ready: function () {
	Vue.use(VueResource);
	var that=this
	that.$http({
 		method:'post',
 		headers: {"X-Requested-With": "XMLHttpRequest"},
 		emulateJSON: true,
 		url:'http://xyg.bigdatas.top/ivory-valley/auth/userinfo.dx',
 		data:{}
 	 }).then(function(data){
	   that.userInf = data.data.res

 	},function(error){

      })

	}
}
</script>

<style scoped>
.task{
width:100%;
height:100%;
margin-bottom:75px;
}
.mt5{
margin-top:5px;
}
.title{
box-sizing:border-box;
background-color:#fff;
margin-top:0;
padding:15px 8px 8px;
}
	.logo{
	width:20%;
	height:50px;
	float:left;
	}
	.logo img{
	width:50px;
	height:50px;
	border-radius:50%;
	border:1px solid #888888;
	}
	.add-title{
	width:80%;
	height:45px;
	line-height:50px;
	float:right;
	border-bottom:1px solid #d0d0d0;
	}
	.add-title input{
	width:98%;
	height:36px;
	border:0;
	font-size:18px;
	}
	.clearFloat:after{
	content:'';
	display:block;
	clear:both;
	hisibility:hidden;
	}
	.mr5{margin-right:5px;}
	.location,.date{height:20px;line-height:20px;color:#a8a8a8;}
	.date input{border:0;color: #a8a8a8;width:150px;}
	.location img,.date img{height:20px;width:20px;vertical-align:middle;}
	.dateInf{
	box-sizing:border-box;
	background-color:#fff;
	color:#8a8a8a;
	padding:0 8px 8px;
	font-size:12px;
	}
	.task-detail{
	height:40px;
	line-height:40px;
	background-color:#fff;
	padding:8px;
	}
	.addPoint{
	line-height:40px;
	height:40px;
	background-color:#fff;
	padding:8px;
	}
	.addPoint img,.selectIcon img{
	width:30px;
	height:30px;
	vertical-align:middle;
	}
	.select{
	line-height:40px;
	height:40px;
	padding:8px 0;
	background-color:#fff;
	}
	.selectIcon{
	width:33%;
	float:left;
	text-align:center;
	}
	.dead_date{width:105px;color:#8a8a8a;border:0;}
	.dead_time{color:#8a8a8a;border:0;}
	.lodding{position:fixed;top:100px;margin:0 auto;left: 50%;margin-left: -16px;top:50%;margin-top:-16px;}
	.addTask{color:#fff;width:90%;margin:20px auto;background-color:#56ABE4;line-height:40px;border-radius:8px;text-align:center;}
</style>
